<script setup lang="ts">
import { ref } from 'vue'
const show = ref(false)
const btnClick = () => {
  show.value = !show.value
}
</script>

<template>
  <div>
    <h1>高度自动过渡</h1>
    <div>
      <el-button class="btn" @click="btnClick">按钮</el-button>
      <div class="content">
        <!-- 文本 -->
        <div :class="{ noText: true, text: show }">
          <h3>方案一：scaleY</h3>
          Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
          Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
          Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
          Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
          Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
          Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.noText {
  width: 300px;
  transform-origin: center top;
  transform: scaleY(0);
  transition: 0.5s;
}
.text {
  width: 300px;
  background-color: aqua;
  transform: scaleY(1);
}
</style>
